<template>
  <h4>组合式api - vuex</h4>
  <div>msg: {{ msg }}</div>
  <div>count: {{ count }}</div>
  <div>doubleCount: {{ doubleCount }}</div>
  <button @click="hanldeClick">count++</button>
  <button @click="hanldeClick2">count--</button>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";

// 和路由一样，在setup的顶层调用
const store = useStore();

// 当获取仓库的数据的时候，应该要使用计算属性
// 组合式api没有vuex的辅助函数
const msg = computed(() => {
  return store.state.msg;
});
const count = computed(() => {
  return store.state.count;
});

const doubleCount = computed(() => {
  return store.getters.doubleCount;
});

const hanldeClick = () => {
  store.commit("add");
};
const hanldeClick2 = () => {
  store.dispatch("asyncMinus");
};
</script>
